/*
产品销售统计3
*/
<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header/>
    <!-- 列表区 -->
    <el-card  style="flex: 1;">
      <div class="app-page">
        <div class="content-flex">
          <el-form ref="search" :model="search" inline size="small">
            <el-form-item label="付款(揽收)日期" prop="date">
              <el-date-picker
                v-model="search.date"
                type="daterange"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="" prop="statisticsType">
              <el-select
                v-model="search.statisticsType"
                placeholder="时间轴单位"
              >
                <el-option
                  v-for="item in searchOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="storeName" label="">
              <el-select
                filterable
                style="width: 100%"
                v-model="search.storeName"
                placeholder="全部门店"
              >
                <el-option
                  v-for="item in stores"
                  :key="item.name"
                  :value="item.name"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="customerNum" label="">
              <el-input v-model="search.customerNum" placeholder="客户号"></el-input>
            </el-form-item>
            <el-form-item prop="goodsName" label="">
              <el-input v-model="search.goodsName" placeholder="填写商品信息"></el-input>
            </el-form-item>
            <el-form-item label="" prop="query_batchId">
              <el-button type="primary" round @click="getStoreAmount" style="background: #64b0f2">统计</el-button>
              <el-button
                type="warning"
                round
                @click="$refs.search.resetFields()">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 列表区 -->
        <div style="flex: 1;overflow: auto">
          <el-tabs type="border-card" @tab-click="handleTabClick" v-model="activeName">
            <el-tab-pane label="信息总览" name="1">
              <el-table
                :data="statisticsData.goodsTotalInfos"
                height="70%"
                style="width: 100%">
                <el-table-column label="商品名称" width="400">
                  <template slot-scope="scope">
                    {{scope.row.goodsInfo.skuCode}} {{scope.row.goodsInfo.englishBrand}} {{scope.row.goodsInfo.goodsName}} {{scope.row.goodsInfo.specification}}
                  </template>
                </el-table-column>
                <el-table-column :label="store.name+'('+stores.filter(item => item.name == store.name)[0].code+')'" v-for="store in stores" :key="store.id" align="center">
                  <el-table-column label="包邮商品" align="center">
                    <el-table-column label="数量" align="center">
                      <template slot-scope="scope">
                        {{scope.row.goodsStoreInfos.filter(info=>info.storeName === store.name)[0].mailGoodsInfo.count}}
                      </template>
                    </el-table-column>
                    <el-table-column label="金额" align="center">
                      <template slot-scope="scope">
                        {{scope.row.goodsStoreInfos.filter(info=>info.storeName === store.name)[0].mailGoodsInfo.amount}}
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column label="单买商品" align="center">
                    <el-table-column label="数量" align="center">
                      <template slot-scope="scope">
                        {{scope.row.goodsStoreInfos.filter(info=>info.storeName === store.name)[0].selfGoodsInfo.count}}
                      </template>
                    </el-table-column>
                    <el-table-column label="金额" align="center">
                      <template slot-scope="scope">
                        {{scope.row.goodsStoreInfos.filter(info=>info.storeName === store.name)[0].selfGoodsInfo.amount}}
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="全部门店" align="center">
                  <el-table-column label="合计" align="center">
                    <el-table-column label="数量" align="center" prop="totalStoreInfos.count"></el-table-column>
                    <el-table-column label="金额" align="center" prop="totalStoreInfos.amount"></el-table-column>
                  </el-table-column>
                </el-table-column>
              </el-table>
              <div class="statistic-box">
                <div class="box" v-for="(item,index) in statisticsData.storeSaleOrders" :style="{'margin-left':index%2===0?'0':'2%'}">
                  <el-card shadow="hover">
                    <div slot="header" style="text-align: center">
                      <el-link type="primary"> <i class="el-icon-s-home"></i></el-link>
                      {{item.storeInfo.name}}({{item.storeInfo.code}}) 销售单
                    </div>
                    <el-table
                      :data="item.saleOrders"
                      height="100%"
                      style="width: 100%">
                      <el-table-column label="销售单号">
                        <template slot-scope="scope">
                          <span>scope.$index.{{scope.row.saleOrderCode}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="客户号" prop="customerNum"></el-table-column>
                      <el-table-column label="收据号" prop="receiptOrderCode"></el-table-column>
                      <el-table-column label="单买商品">
                        <template slot-scope="scope">
                          <span>{{scope.row.goodsEnglishBrand}}</span>  <span>{{scope.row.goodsName}}</span> <span>{{scope.row.specification}}</span> × {{scope.row.buyNum}}
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-card>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="'选定商品数'+(statisticsData.goodsCount || 0)+'个'" name="2">

            </el-tab-pane>
            <el-tab-pane :label="'总售量'+totalCount+'个'" name="3">
              <my-line ref="line1" tips="销售数量：" y-type="个"></my-line>
            </el-tab-pane>
            <el-tab-pane :label="'销售总价'+totalAmount+'加元'" name="4">
              <my-line ref="line2" tips="销售总金额：$" y-type="加元"></my-line>
            </el-tab-pane>
            <el-tab-pane :label="'涉及运单数'+totalOrder+'个'" name="5">
              <my-line ref="line3" tips="运单数量：" y-type="个"></my-line>
            </el-tab-pane>
            <el-tab-pane :label="'涉及销售单数'+totalSale+'个'" name="6">
              <my-line ref="line4" tips="销售单数量：" y-type="个"></my-line>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { dateFormat } from "@/utils";
import myHeader from "@/components/pageHEader/pageHeader";
import { mapGetters } from 'vuex'
import {getMailgoods} from '@/api/statistics/commodity'

import myLine from '../components/myLine'
let search = {
  date:[dateFormat('YYYY-mm-dd',new Date()),dateFormat('YYYY-mm-dd',new Date())],
  statisticsType:'DAY',
  storeName:'',
  customerNum:'',
  goodsName:''
}
export default {
  name: 'payment',
  components:{
    myHeader,
    myLine
  },
  computed: {
    ...mapGetters(["stores"]),
  },
  data(){
    return {
      search:this.cloneObj(search),
      activeName:'1',
      searchOptions:[
        {
          label:'日统计',
          value:'DAY'
        },{
          label:'月统计',
          value:'MONTH'
        },{
          label:'年统计',
          value:'YEAR'
        },
      ],
      statisticsData:{},
      totalCount:0,
      totalAmount:0,
      totalOrder:0,
      totalSale:0,
    }
  },
  created() {
    this.getStoreAmount()
  },
  methods:{
    getStoreAmount(){
      let query = {
        startDate:this.search.date[0] +' 00:00:00',
        endDate:this.search.date[1] +' 23:59:59',
        statisticsType:this.search.statisticsType,
        customerNum:this.search.customerNum,
        goodsName: this.search.goodsName,
        storeName: this.search.storeName
      }
      this.activeName = '1'
      getMailgoods(query).then(resp=>{
        this.statisticsData = resp.data
        this.statisticsData.goodsCountDateInfos.forEach(item=>{
          this.totalCount+=item.count
        })
        this.statisticsData.goodsAmountDateInfos.forEach(item=>{
          this.totalAmount+=item.amount
        })
        this.statisticsData.workOrderCountDateInfos.forEach(item=>{
          this.totalOrder+=item.count
        })
        this.statisticsData.saleOrderCountDateInfos.forEach(item=>{
          this.totalSale+=item.count
        })
      })
    },
    handleTabClick(tab){
      if(tab.name == 3){
        this.$nextTick(()=>{
          let xData = this.statisticsData.goodsCountDateInfos.map(item=>item.dateString)
          let yData = this.statisticsData.goodsCountDateInfos.map(item=>item.count)
          this.$refs.line1.init(xData,yData)
        })
      }
      if(tab.name == 4){
        this.$nextTick(()=>{
          let xData = this.statisticsData.goodsAmountDateInfos.map(item=>item.dateString)
          let yData = this.statisticsData.goodsAmountDateInfos.map(item=>item.amount)
          this.$refs.line2.init(xData,yData)
        })
      }
      if(tab.name == 5){
        this.$nextTick(()=>{
          let xData = this.statisticsData.workOrderCountDateInfos.map(item=>item.dateString)
          let yData = this.statisticsData.workOrderCountDateInfos.map(item=>item.count)
          this.$refs.line3.init(xData,yData)
        })
      }
      if(tab.name == 6){
        this.$nextTick(()=>{
          let xData = this.statisticsData.saleOrderCountDateInfos.map(item=>item.dateString)
          let yData = this.statisticsData.saleOrderCountDateInfos.map(item=>item.count)
          this.$refs.line4.init(xData,yData)
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-tabs{
  height: 100%;
}
/deep/ .el-tabs--border-card{
  box-shadow: unset;
}
/deep/ .el-tabs__content{
  height: calc(100% - 50px);
  &>div{
    height: 100%;
    overflow: auto;
  }
}

.statistic-box{
  display: flex;
  height: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  .box{
    width: 49%;
    height: 49%;
  }
}
</style>

